<template>
	<movable-area class="movable-area">
		<movable-view
			class="movable-view"
			:x="x"
			:y="y"
			:damping="20"
			:friction="2"
			@change="onChange"
		>
			<view class="global-fab-container">
				<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
					:direction="direction"  @trigger="trigger" @fabClick="fabClick" />
				<!-- trigger 点击内容事件 -->
				<!-- @fabClick点击按钮事件 -->
			</view>
		</movable-view>
	</movable-area>
</template>

<script>
export default {
  name: "fab",
  data() {
    return {
      x: 500, // 初始X坐标
      y: 770, // 初始Y坐标
      direction: 'vertical',
      horizontal: 'right',
      vertical: 'bottom',
      pattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF',
        iconColor: '#fff'
      },
      content: [
        {
          text: '相册',
          active: false,
          path: '/pages/index/index'
        },
        {
          text: '首页',
          active: false,
          path: '/pages/index/index'
        },
        {
          text: '收藏',
          active: false,
          path: '/pages/mine/collect'
        }
      ]
    }
  },
  methods: {
    fabClick() {
      console.log('fab clicked')
    },
    trigger(e) {
      const index = e.index
      const item = this.content[index]
      if (item && item.path) {
        // 根据需要使用 navigateTo 或 switchTab
        if (item.path.includes('tabbar')) {
          uni.switchTab({
            url: item.path
          })
        } else {
          uni.navigateTo({
            url: item.path
          })
        }
      }
    },
    onChange(e) {
      // 记录位置变化
      this.x = e.detail.x;
      this.y = e.detail.y;
    }
  }
}
</script>

<style>
.movable-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  pointer-events: none;
}

.movable-view {
  pointer-events: auto;
}

.global-fab-container {
  position: relative;
  z-index: 999;
}
</style>